#app{
  background-color: #ecfdfa;
  width: 100%;
  height: 667px;
}
*{
  margin: 0;
  padding: 0;
}
.square {
    width: 100%;
    height: 220px;
    background-color: #2bcddd;
    border-radius: 0px 0px 40% 40%;
  }

  .login{
    color: white;
    font-size: 20px;
    text-decoration: underline;
    text-decoration-color: red;
    text-decoration-thickness: 5px;
    
    padding-top: 15px;
    padding-left: 10px;
  }

  .login_content{
    width: 85%;
    height: 500px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    right: 0px;
    margin: auto;
    position: absolute;
    background-color: white;
    border-radius: 5%;
  }

  /* logo */
  #logo{
    position:sticky;
  }

  #u288 {
    border-width: 0px;
    position: absolute;
    left: 142px;
    top: 54px;
    width: 69px;
    height: 19px;
    -webkit-transform: rotate(60deg);
    -moz-transform: rotate(60deg);
    -ms-transform: rotate(60deg);
    transform: rotate(60deg);
}

  #u288_img {
    border-width: 0px;
    position: absolute;
    left: -10px;
    top: -5px;
    width: 89px;
    height: 39px;
}

#u289 {
  border-width: 0px;
  position: absolute;
  left: 133px;
  top: 89px;
  width: 69px;
  height: 20px;
}

#u289_img {
  border-width: 0px;
  position: absolute;
  left: -10px;
  top: -5px;
  width: 89px;
  height: 40px;
}

#u290 {
  border-width: 0px;
  position: absolute;
  left: 107px;
  top: 64px;
  width: 69px;
  height: 21px;
  -webkit-transform: rotate(300deg);
  -moz-transform: rotate(300deg);
  -ms-transform: rotate(300deg);
  transform: rotate(300deg);
}

#u290_img {
  border-width: 0px;
  position: absolute;
  left: -10px;
  top: -5px;
  width: 89px;
  height: 41px;
}

/* 登录主体 */
.login_form{
  width: 80%;
  margin: 200px 0px auto;
  margin-left: 30px;
}

.extraPart{
  height: 49px;
  padding-left: 12px;
  font-size: 17px;
  line-height: 49px;
}

/* 输入框 */
.input{
  position:relative;
  z-index: 9;
}

/*使用伪类给a下面添加下划线*/
/*css3为了区别伪类选择器把::改为:,使用:也会自动转为::*/
.input::after{
  content:'';
  display:block;
  /*开始时候下划线的宽度为0*/
  width:0;
  height:1.5px;
  position:absolute;
  left:0;
  bottom:-10px;
  background:#ff5e81;
  /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
  transition:all 0.3s ease-in-out;
}
.input:hover::after{
  width:100%;
}


.left-to-right{
  position:relative;
}
/*使用伪类给a下面添加下划线*/
/*css3为了区别伪类选择器把::改为:,使用:也会自动转为::*/
.left-to-right::after{
  content:'';
  display:block;
  /*开始时候下划线的宽度为0*/
  width:0;
  height:1.5px;
  position:absolute;
  left:0;
  bottom:-10px;
  background:#ff5e81;
  /*这里我们设定所有改变都有动画效果，可以自己指定样式才有动画效果*/
  transition:all 0.3s ease-in-out;
}
.left-to-right:hover::after{
  width:100%;
}


/* 取消按钮 */
